<template>
	<div class="sidebar">
	    <el-menu
	        class="sidebar-el-menu"
	        :default-active="onRoutes"
	        :collapse="collapse"
	        text-color="#FFFFFF"
	        active-text-color="#3A4B5A"
	        unique-opened
	        router
	    >
	        <template v-for="item in items">
	            <template v-if="item.children && item.children[0].type != 'FUNC'">
	                <el-submenu :index="item.router" :key="item.router">
	                    <template slot="title">
	                        <i :class="item.icon"></i>
	                        <span style="color:#fff" slot="title">{{ item.name }}</span>
	                    </template>
	                    <template v-for="subItem in (item.children)">
	                        <el-submenu
	                            v-if="subItem.children && subItem.type != 'FUNC'"
	                            :index="subItem.router"
	                            :key="subItem.router">
	                            <template slot="title">
	                                {{ subItem.name }}
	                            </template>
	                            <!-- <el-menu-item v-for="(threeItem,i) in (subItem.children)"  :key="i" :index="threeItem.router"  :class="'/'+$route.path.split('/')[1]==item.router?'is-active':''">
	                                {{ threeItem.name }}
	                            </el-menu-item> -->
	                        </el-submenu>
	                        <el-menu-item v-if="!subItem.children && subItem.type != 'FUNC'" :index="subItem.router" :key="subItem.router" :class="'/'+$route.path.split('/')[1]==item.router?'is-active':''"> 
	                            {{ subItem.name }}
	                        </el-menu-item>
	                    </template>
	                </el-submenu>
	            </template>
	            <template v-else>
	                <el-menu-item :index="item.router" :key="item.router" v-if="item.type != 'FUNC'" :class="'/'+$route.path.split('/')[1]==item.router?'is-active':''">
	                    <i :class="item.icon"></i>
	                    <span style="color:#fff" slot="title">{{ item.name }}</span>
	                </el-menu-item>
	            </template>
	        </template>
	    </el-menu>
	</div>
</template>

<script>
import bus from '../common/bus';
export default {
	inject: ['reload'],
    data() {
        return {
			qwe:'',
            collapse: false,
            items: [
                {
                    icon: 'el-icon-s-home',
                    index: 'dashboard',
                    title: '首页'
                }
            ],
			item1:[]
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    methods:{
        changeApp(id){
			this.qwe = localStorage.getItem("qwe")
			var type = localStorage.getItem("type")

           let appMenus = this.$util.get("userInfo").appMenus;
           if(appMenus && appMenus.length>0){
               var position =0;
               if(id){
                    for(var i=0;i<appMenus.length;i++){
                        if(appMenus[i].appId==id){
                            position=i;
                            break;
                        }
                    }
                }
				var TabStatus = sessionStorage.getItem("setTabStatus")
				if(TabStatus == "sss" || TabStatus == null){
					
					let slide = []
					let Menus = appMenus[position].flowMenus;
					// console.log(appMenus[position].flowMenus)
					if(Menus!=null && Menus.length>0){
						this.items = Menus
					}
					this.$router.push({
						path:this.items[0].router
					})
				}else{
					let Menus1 = appMenus[position].configMenus;
					// console.log(appMenus[position].configMenus)
					if(Menus1!=null && Menus1.length>0){
						this.items = Menus1
					}
					this.$router.push({
						path:this.items[0].router
					})
				}
           }
		   
        },
        filterMenu(menu){
           for(var i=0;i<menu.length;i++){
               if(menu[i].type!="MENU"){
                  menu.splice(i, 1);
               }
           }
           return menu;
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });

     
       bus.$on('changeApp', val => {
            this.changeApp(val.appId);
        });
	
		var tabtype = sessionStorage.getItem("tabtype")
		if(tabtype == null || tabtype == undefined){
			this.changeApp()
		}
        
		this.qwe = localStorage.getItem("qwe")
    }
};
</script>

<style scoped lang="less">
i{
    display: inline-block;
    width:30px;
    text-align: center;
}
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
    background-color: #6C7D92; 
}
/deep/.el-menu{
	background: #6C7D92;
}
.sidebar::-webkit-scrollbar{
    width: 64px;
}
/deep/.el-submenu__title:hover{
	background: #6C7D92;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
    background: #6C7D92;
}
.sidebar > ul {
    height: 100%;
}
.el-submenu{
	background: #6C7D92;
}
.el-submenu .el-menu-item{
    padding-left: 52px !important;
}
/* 设置鼠标悬停时sidebar-el-menu的样式 */
.el-tooltip__popper.is-dark{
    span{
        color: #409EFF !important;
    }
}

.sidebar-el-menu .el-menu-item:hover{
    background-color: #6C7D92 !important;
}
.sidebar-el-menu .el-menu-item:hover span{
    color: #ffffff !important;
}
.sidebar-el-menu .el-menu-item:hover i{
    color: #ffffff !important;
}
.sidebar-el-menu .el-menu-item.is-active{
    color: #409EFF !important;
    background: #3A4B5A !important;
    span{
        color: #409EFF !important;
    }
    i{
        color: #409EFF !important;
    }
}
.el-submenu__title .iconfont{
    color: #FFFFFF;
    margin: 0 5px 0 3px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle
}
.el-menu-item i{
    color:#FFFFFF;
}
</style>
